<template>
  <je-tree
    ref="flowTreeRef"
    class="flow-tree-warp"
    height="500"
    :search="{
      style: 'height:40px;',
      placeholder: '搜索',
    }"
    size="mini"
    :loading="loading"
    :data="treeData"
    :tree-config="{
      trigger: 'cell-dblclick',
      rowField: 'id',
      parentField: 'parent',
      funcCode: 'code',
    }"
    @current-change="handlerSelect"
    @search-select="handleSearchChange"
  >
    <template #nodeIcon="{ row }">
      <template v-if="row.nodeType === 'WF'">
        <i style="color: #3f3f3f" class="fal fa-poll-h"></i>
      </template>
      <template v-if="row.nodeType === 'LEAF'">
        <i style="color: #ffb04a" class="fas fa-folder-open"></i>
      </template>
    </template>
  </je-tree>
</template>

<script>
  import { defineComponent, toRefs, onMounted, reactive, ref, toRaw, onBeforeUnmount } from 'vue';
  import { Tree } from '@jecloud/ui';
  import VueEvent from '@/helper/event';
  import { HOME_FLOW_CHILD_SWITCH, HOME_FLOW_CHECK_TYPE } from '@/helper/constant';
  import { GetLoadTree } from '@/api';
  export default defineComponent({
    name: 'FlowCheck',
    components: {
      JeTree: Tree,
    },
    setup() {
      const flowTreeRef = ref();
      const state = reactive({
        searchName: '', //搜索流程分类
        size: 'mini',
        loading: false,
        treeData: [],
        curSortCode: '', //选择当前的流程分类code
      });
      const deepChildrenId = (data = [], arrIds = []) => {
        for (let item of data) {
          // if (item.nodeType === 'WF') {
          //   arrIds.push(item.id);
          // }
          arrIds.push(item.id);
          if (item.children && item.children.length > 0) {
            deepChildrenId(item.children, arrIds);
          }
        }
        return arrIds;
      };
      const methods = {
        handlerSelect({ row }) {
          //选择当前类型
          const curRow = toRaw(row);
          let curIds = deepChildrenId([curRow]);
          let curTypeIds = curIds.toString();
          //选择当前分类
          if (state.curSortCode) {
            //有选中的分类
            if (state.curSortCode == curTypeIds) {
              //选中的分类和当前操作的分类相等
              state.curSortCode = '';
            } else {
              //选中的分类和当前操作的分类不相等
              state.curSortCode = curTypeIds;
            }
          } else {
            //没有选中的分类
            state.curSortCode = curTypeIds;
          }
          VueEvent.emit(HOME_FLOW_CHECK_TYPE, state.curSortCode);
        },
        handleSearchChange({ row }) {
          //搜索树结构
          methods.handlerSelect({ row });
        },
        getFlowTypeTree() {
          //获取流程审核分类树
          state.loading = true;
          const param = {
            node: 'ROOT',
            onlyItem: true,
            excludes: 'checked',
            strData: JSON.stringify([
              {
                ddCode: 'JE_WF_PROCESS',
                ddName: null,
                rootId: '',
                async: false,
                params: {},
                j_query: { custom: [], order: [], _types: [] },
                nodeInfo: '',
              },
            ]),
          };
          GetLoadTree(param).then((res) => {
            state.treeData = res;
            state.loading = false;
          });
        },
        watchFlowSwitch() {
          //监听流程审核对应子元素变化
          flowTreeRef.value.setSelectRow({});
        },
      };
      onMounted(() => {
        methods.getFlowTypeTree();
        // VueEvent.on(HOME_FLOW_CHILD_SWITCH, methods.watchFlowSwitch);
      });
      onBeforeUnmount(() => {
        // VueEvent.off(HOME_FLOW_CHILD_SWITCH);
      });
      return {
        flowTreeRef,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .flow-tree-warp .ant-select {
    height: 40px;
  }
  .flow-tree-warp .ant-select .ant-input-affix-wrapper {
    /* box-sizing: border-box; */
    border-color: #ecedf0;
  }
  .flow-tree-warp .vxe-table--render-default .vxe-table--body-wrapper {
    border-left: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
  }
  /* .flow-tree-warp .ant-input:focus,
  .flow-tree-warp .ant-select-focused {
    border-color: #f5f5f5;
  } */
  /* .flow-tree-warp .ant-input-affix-wrapper:focus,
  .flow-tree-warp .ant-input-affix-wrapper-focused {
    box-shadow: none;
  } */
</style>
<style scoped lang="less">
  .content-search-box {
    width: 210px;
    height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #ecedf0;
    border-left: 1px solid #ecedf0;
  }
  .tree-box {
    width: 100%;
    // height: 600px;
    overflow-y: auto;
    box-sizing: border-box;
    border-left: 1px solid #ecedf0;
  }
  .flow-tree-warp .ant-select {
    height: 40px;
    box-sizing: border-box;
  }
</style>
